<template>
  <div class="rect">
    <!-- <h3>可以绘制矩形</h3> -->
    <el-row>
      <!-- <el-button type="primary" @click="blue">蓝色</el-button>
      <el-button type="success" @click="green">绿色</el-button>
      <el-button type="danger" @click="red">红色</el-button>-->
      <!-- <el-color-picker v-model="color1"></el-color-picker> -->
      <el-color-picker v-model="color" show-alpha :predefine="predefineColors"></el-color-picker>
      <el-button type="primary" plain @click="rad">圆形</el-button>
      <el-button type="success" plain @click="squ">矩形</el-button>
      <el-button type="danger" icon="el-icon-delete" circle @click="delet"></el-button>
    </el-row>

    <div
      class="canvas"
      id="canvas"
      @mousedown="mousedownHandle"
      @mousemove="mousemoveHandle"
      @mouseup="mouseupHandle"
    ></div>
  </div>
</template>
<script type="text/javascript">
import axios from "@/utils/axios";
import $ from "jquery";
export default {
  data() {
    return {
      newDiv: null,
      startX: 0,
      startY: 0,
      // color: "rgba(255, 0, 0, 0.5)",
      Radius: "0%",
      // color1: "#409EFF",
      // color2: null
      color: "rgba(255, 69, 0, 0.68)",
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577"
      ]
    };
  },
  // 钩子函数 生命周期。在组件创建好之后执行的函数
  created() {},
  // 钩子函数，结点渲染完毕之后执行的函数
  mounted() {},
  methods: {
    delet() {
      $("#canvas").empty();
    },
    blue() {
      this.color = "rgba(0, 0, 255, 0.5)";
    },
    red() {
      this.color = "rgba(255, 0, 0, 0.5)";
    },
    green() {
      this.color = "rgba(0, 255, 0, 0.5)";
    },
    rad() {
      this.Radius = "100%";
    },
    squ() {
      this.Radius = "0%";
    },
    mousedownHandle(event) {
      var width = $(".sidebar-logo-container").width();
      var height = $(".sidebar-logo-container").height();
      var newDiv = $(`<div class="one"></div>`);
      this.newDiv = newDiv;
      // if (this.color2) {
      //   var color = this.color2;
      // } else {
      //   var color = this.color1;
      // }
      var color = this.color;
      var Radius = this.Radius;
      newDiv.css({
        top: event.clientY - height + "px",
        left: event.clientX - width + "px",
        backgroundColor: color,
        borderRadius: Radius
      });
      this.startX = event.clientX;
      this.startY = event.clientY;
      $(".canvas").append(this.newDiv);
    },

    mousemoveHandle(event) {
      var width = $(".sidebar-logo-container").width();
      var height = $(".sidebar-logo-container").height();
      if (this.newDiv) {
        if (event.clientX < this.startX) {
          this.newDiv.css({ left: event.clientX - width + "px" });
        }
        if (event.clientY < this.startY) {
          this.newDiv.css({ top: event.clientY - height + "px" });
        }
        this.newDiv.css({
          width: Math.abs(event.clientX - this.startX) + "px",
          height: Math.abs(event.clientY - this.startY) + "px"
        });
      }
    },
    mouseupHandle(event) {
      this.newDiv = null;
      this.startX = 0;
      this.startY = 0;
    }
  }
};
</script>
<style scope>
.one {
  position: absolute;
  /* background-color: rgba(255, 0, 0, 0.5); */
}
.canvas {
  width: 80%;
  height: 80%;
  border-style: solid;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 50px;
}
.rect {
  height: calc(100vh - 50px);
  background-color: #000;
}
.el-row {
  margin-left: 10px;
}
</style>